<template>
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span>返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3>{{couponItem ? "编辑优惠券" : "添加优惠券"}}</h3>
	</div>
	<el-form ref="myForm" :model="formData" :rules="rules" label-width="auto" >
		<el-form-item label="名称" prop="couponName">
			<el-input placeholder="例如:xxx优惠券,最多20个字" style="width: 270px;" 
			v-model="formData.couponName"></el-input>
		</el-form-item>
		<el-form-item label="面值" prop="couponMoney">
			<el-input placeholder="请输入优惠卷面值" style="width: 270px;" v-model.number="formData.couponMoney"></el-input>
		</el-form-item>
		<el-form-item label="类型" prop="couponType">
			<el-radio-group v-model.number="formData.couponType">
				<el-radio :value="0">通用卷</el-radio>
				<el-radio :value="1">品类卷</el-radio>
				<el-radio :value="2">商品卷</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label=" " v-if="formData.couponType==1">
			<el-tree-select
			    v-model="formData.separateId"
			    :data="separateData"
				:render-after-expand="false"
				show-checkbox
				check-strictly
				placeholder="请选择商品类型"
			    style="width: 200px;margin: 0 4px;"
			/>
		</el-form-item>
		<el-form-item label=" " v-if="formData.couponType==2">
			<el-tree-select
			    v-model="formData.goodsId"
			    :data="goodsData"
				:render-after-expand="false"
				show-checkbox
				check-strictly
				placeholder="请选择商品"
			    style="width: 200px;margin: 0 4px;"
			/>
		</el-form-item>
		<el-form-item label="使用门槛" prop="couponCondition">
			<el-radio-group v-model.number="formData.couponCondition">
				<el-radio :value="1">满减券</el-radio>
				<el-radio :value="0">无门槛卷</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="有效期" prop="days">
			<!-- {{formData.couponUsedtime}} -->
			<el-radio-group v-model="days">
				<el-radio value="fixday">天数</el-radio>
				<el-radio value="fiexdTime">固定时间</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label=" ">
			<span v-if="days == 'fixday'">领取后立即生效，有效期<el-input v-model="fixday" class="useTime">30</el-input>天</span>
			<span v-if="days == 'fiexdTime'">
				有效期到<el-date-picker
					v-model="fiexdTime"
					type="date"
					placeholder="请选择时间"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
				  />
			</span>
		</el-form-item>
		<el-form-item label="是否手动领取" prop="couponManual">
			<el-radio-group v-model="formData.couponManual">
				<el-radio :value="0">是</el-radio>
				<el-radio :value="1">否</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="领取时间" prop="couponReceivetime">
			<el-radio-group v-model="limittime">
				<el-radio value="限时">限时</el-radio>
				<el-radio value="不限时">不限时</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label=" " v-if="limittime =='限时'">
				截止至<el-date-picker
					v-model="receiveTime"
					type="date"
					placeholder="请选择时间"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
				  />
		</el-form-item>
		<el-form-item label="发放数量" prop="grantNum">
			<el-radio-group v-model="limitnum">
				<el-radio value='限量'>限量</el-radio>
				<el-radio value='不限量'>不限量</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="限领张数">
			<el-input type="number" style="width: 270px;" v-model.number="limitNum" :disabled="limitnum=='不限量' ? true : false"></el-input>
		</el-form-item>
		<el-form-item>
		  <el-button type="primary" @click="save(myForm)">保存</el-button>
		  <el-button>取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
	import {ref,reactive,onMounted,defineEmits} from "vue"
	import {CouponInsert,CouponUpdate,GoodsClassList,GoodsList } from "@/api"
	import {useRoute,useRouter} from "vue-router";
	import {Plus} from '@element-plus/icons-vue'
	import {uploadUrl,baseUrl} from "@/utils/request";
	import { ArrowLeft } from "@element-plus/icons-vue"
	import { ElMessage } from 'element-plus'
	
	const emit = defineEmits(['update-message']);
	const back=()=>{
		emit('update-message');
	}
	
	// 商品分类列表
	let separateData=ref([])
	const goodsClassList=async()=>{
		let res=await GoodsClassList({
			pageIndex:1,
			pageSize:1000,
			siteId:1
		})
		// console.log("商品分类",res)
		let separateArr=res.separate
		for(var i=0;i<separateArr.length;i++){
			var firstObj = {
				value:separateArr[i].separateId,
				label:separateArr[i].separateName,
				children:[]
			}
			if(separateArr[i].children != null){
				for(var j=0;j<separateArr[i].children.length;j++){
					var secondObj = {
						value:separateArr[i].children[j].separateId,
						label:separateArr[i].children[j].separateName,
						children:[]
					}
					firstObj.children.push(secondObj)
				}
			}
			separateData.value.push(firstObj)
		}
		// console.log(separateData)
	}
	
	// 商品列表
	let goodsData=ref([])
	const goodsList=async ()=>{
		let res=await GoodsList({
			pageIndex:1,
			pageSize:10000,
			goodsState:"",
			siteId:1
		})
		// console.log("商品列表",res)
		let goodsArr=res.goodsList
		for(var i=0;i<goodsArr.length;i++){
			var firstObj = {
				value:goodsArr[i].goodsId,
				label:goodsArr[i].goodsName,
				children:[]
			}
			goodsData.value.push(firstObj)
		}
	}
	
	
	goodsClassList()
	goodsList()
	let route = useRoute();
	let router = useRouter()
	let couponItem = sessionStorage.getItem("itemCoupon")
	// let limitNum=ref()
	let fixday=ref(30)
	let receiveTime=ref()
	let fiexdTime=ref()
	let limittime=ref("不限时")
	let limitnum=ref("不限量")
	let limitNum=ref()
	let days = ref("fixday")
	let formData = reactive({
		separateId:"",
		goodsId:"",
		couponName: "",
		couponMoney: "",
		couponType: 1,
		couponCondition: 1,
		couponManual:0,
	})
	
	// 编辑回显
	if(couponItem){
		Object.assign(formData,JSON.parse(couponItem))
		
		// 优惠券类型回显
		if(formData.couponType=='通用卷'){
			formData.couponType=0
		}else if(formData.couponType=='品类券'){
			formData.couponType=1
		}else if(formData.couponType=='商品券'){
			formData.couponType=2
		}
		// 优惠券使用门槛
		if(formData.couponCondition=='否'){
			formData.couponCondition=0
		}else if(formData.couponCondition=='是'){
			formData.couponCondition=1
		}
		// 优惠券是否手动领取
		if(formData.couponManual=='是'){
			formData.couponManual=0
		}else if(formData.couponManual=='否'){
			formData.couponManual=1
		}
		// 有效期
		if(formData.couponUsedtime !=""){
			days.value="fixday"
			fixday.value=formData.couponUsedtime
		}else{
			days="fiexdTime"
			fiexdTime.value=formData.fixedTime
		}
		// 发放数量
		if(formData.couponNumber=='不限量'){
			limitnum.value="不限量"
		}else{
			limitnum.value="限量"
			limitNum.value=formData.couponNumber
		}
		if(formData.couponReceivetime=="不限时"){
			limittime.value="不限时"
		}else{
			limittime.value="限时"
			receiveTime.value=formData.couponReceivetime
		}
		// console.log("回显formdata",formData)
	}
	

	const rules = reactive({
		couponName: [{
			required: true,
			message: '请输入优惠券名称',
			trigger: 'blur'
		}, ],
		couponMoney: [{
			required: true,
			message: '请输入优惠卷面值',
			trigger: 'change',
		}, ],
		
	})

	let myForm=ref(null)
	const save= async()=>{
		if(days.value=="fixday"){
			formData.couponUsedtime=fixday.value
		}else{
			formData.couponUsedtime=""
			formData.fixedTime=fiexdTime.value
		}
		// 优惠券类型判断
		if(formData.couponType==0){
			formData.separateId=null
			formData.goodsId=null
		}else if(formData.couponType==1){
			formData.goodsId=null
		}else if(formData.couponType==2){
			formData.separateId=null
		}
		// 领取时间
		limittime.value=="不限时" ? formData.couponReceivetime="不限时" : formData.couponReceivetime=receiveTime.value
		limitnum.value=="不限量" ? formData.couponNumber="不限量" : formData.couponNumber=limitNum.value
		// console.log("添加商品formData",formData)
		if(couponItem){
			// console.log('修改formdata',formData)
			let res=await CouponUpdate({
				couponId:formData.couponId,
				couponName:formData.couponName,
				couponType:formData.couponType,
				couponManual:formData.couponManual,
				couponNumber:formData.couponNumber,
				couponMoney:formData.couponMoney,
				couponReceivetime:formData.couponReceivetime,
				couponUsedtime:Number(formData.couponUsedtime),
				fixedTime:formData.fixedTime,
				couponCondition:formData.couponCondition,
				separateId:formData.separateId,
				goodsId:formData.goodsId
			})
			// console.log("修改优惠券",res)
			if(res==null){
				ElMessage.success("修改成功")
			}
		}else{
			//添加
			// console.log(formData)
			let res=await CouponInsert(formData)
			// console.log("添加优惠券",res)
			if(res==null){
				ElMessage.success("添加成功")
			}
		}
		emit('update-message');
	}


	// onMounted(async (formEl)=>{
	// 	//获取所有菜单，展示在下拉菜单中;
	// 	if(menuItem){
	// 		//如果是修改功能，回显
	// 		checkedArr.value=[JSON.parse(menuItem).menuSuperior]

	// 	}
	// })
</script>

<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
	
	.el-input {
	  --el-input-width: 30%;
	}
	.useTime{
		--el-input-width: 120px;
	}
	
	.getTips{
		display: block;
	}
</style>
